<template>
  <div class="h100">
    <div class="nav">
      <el-button @click="showAddDialog" type="primary">新增</el-button>
      <div class="search">
        <el-input
          v-model="searchVal"
          class="w-50 m-2"
          placeholder="请输入车次"
          :prefix-icon="Search"
        />
        <el-button type="primary">搜索</el-button>
      </div>
    </div>
    <!-- 新增弹框 -->
    <el-dialog v-model="dialogFormVisible" title="新增车次管理">
      <!-- 表单 -->
      <el-form ref="ruleFormRef" :rules="rules" :model="form">
        <el-form-item
          label="车次/类型"
          prop="type"
          :label-width="formLabelWidth"
        >
          <el-select v-model="form.type" placeholder="请选择车次/类型">
            <el-option
              v-for="item in carTypeList"
              :label="item.carType"
              :value="item.carType"
              :key="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="车长" prop="vehicle" :label-width="formLabelWidth">
          <el-select v-model="form.vehicle" placeholder="请选择车长">
            <!-- vehicleList -->
            <el-option
              v-for="item in vehicleList"
              :label="item.name"
              :value="item.name"
              :key="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="总座位数"
          prop="count"
          :label-width="formLabelWidth"
        >
          <el-input-number v-model="form.count" :min="1" :max="1000" />
        </el-form-item>

        <el-form-item label="车厢人数" prop="sum" :label-width="formLabelWidth">
          <el-input-number v-model="form.sum" :min="1" :max="1000" />
        </el-form-item>

        <el-form-item
          label="限乘人数"
          prop="limitCount"
          :label-width="formLabelWidth"
        >
          <el-input-number v-model="form.limitCount" :min="1" :max="1000" />
        </el-form-item>

        <el-form-item
          label="创建时间"
          prop="date"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="form.date"
            type="datetime"
            placeholder="请选择时间"
          />
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <!-- <el-switch v-model="form.code" /> -->
          {{ form.code }}
        </el-form-item>

        <el-form-item>
          <div class="btnBox">
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="addSuccess(ruleFormRef)">
                确认
              </el-button>
            </span>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 表格 -->
    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="type" label="车次/类型" width="110">
          <template #default="scope">
            <span>
              {{ scope.row.type }}
              <el-icon v-copy="scope.row.type"><Pointer /></el-icon>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="vehicle" label="车长" width="100" />
        <el-table-column prop="count" label="总座位数" width="100" />
        <el-table-column prop="sum" label="车厢人数" width="100" />
        <el-table-column prop="limitCount" label="限乘人数" />
        <el-table-column prop="date" label="创建时间" />
        <el-table-column prop="code" label="状态">
          <template #default="scope">
            <el-switch v-model="scope.row.code" />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-space>
              <el-button size="small" type="primary">编辑</el-button>
              <el-popconfirm
                title="确认要删除么?"
                confirm-button-text="确认"
                @confirm="confirm(scope.row.id)"
                cancel-button-text="取消"
              >
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
    </div>
  </div>
</template>
<script setup>
import {
  getCarTypeList,
  getVehicleList,
  addAdminCarItem,
  getCarList,
  delAdminCarItem,
} from "@/api/adminCar";
import { ref, reactive } from "vue";
import { formatTime } from "@/utils/date.js";
import { useInit } from "@/hooks/init";

const ruleFormRef = ref();
// 初始化列表
const { tableData, init } = useInit(getCarList);

// 新增逻辑
const dialogFormVisible = ref(false);
const formLabelWidth = "100px";
const form = reactive({
  code: false,
});
// 车次类型列表
const carTypeList = ref([]);
// 车长列表
const vehicleList = ref([]);
const showAddDialog = () => {
  dialogFormVisible.value = true;
  // 车次类型列表
  getCarTypeList().then((res) => {
    carTypeList.value = res.data.data;
  });
  // 车长类型列表
  getVehicleList().then((res) => {
    vehicleList.value = res.data.data;
  });
};

// 表单验证规则
const rules = reactive({
  type: [{ required: true, message: "请选择车次类型", trigger: "blur" }],
  vehicle: [
    {
      required: true,
      message: "请选择车次",
      trigger: "blur",
    },
  ],
  count: [
    {
      required: true,
      message: "请输入总座位数",
      trigger: "blur",
    },
  ],
  sum: [
    {
      required: true,
      message: "请输入车厢人数",
      trigger: "blur",
    },
  ],
  limitCount: [
    {
      required: true,
      message: "请输入限乘人数",
      trigger: "blur",
    },
  ],
  date: [
    {
      required: true,
      message: "请输入创建时间",
      trigger: "blur",
    },
  ],
});

// 添加确认按钮
const addSuccess = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      form.date = formatTime(new Date(form.date).getTime(), "Y-M-D h:m:s");
      addAdminCarItem(form).then((res) => {
        if (res.data.code === 1) {
          dialogFormVisible.value = false;
          init();
        }
      });
    }
  });
};

// 确认删除
const confirm = (id) => {
  console.log(id);
  delAdminCarItem(id).then((res) => {
    if (res.data.code === 1) {
      init();
    }
  });
};

// 搜索
const searchVal = ref()
</script>
<style scoped>
.pagination {
  position: absolute;
  bottom: 60px;
  right: 60px;
}

.nav {
  margin: 15px 0;
  display: flex;
}

.search {
  margin-left: 30px;
  width: 260px;
  display: flex;
}

.btnBox {
  position: absolute;
  right: 20px;
}
</style>
